<template>
  <div>
    <div class="page_header">
      <div class="header_left">
        <el-divider direction="vertical" class="header_divider"></el-divider>
        <span class="header_title">知识库使用次数</span>
        <div class="header_refresh">
          <img src="../../../assets/images/home/refresh.png" class="header_refresh_img" alt="" @click="refreshClick" />
        </div>
      </div>
    </div>
    <div class="page_content">
      <div ref="commandstats" style="height: 260px" />
    </div>
  </div>
</template>

<script setup lang='ts'>
import homeIndexApi from '@/api/homeIndex/homeIndexApi';
import * as echarts from 'echarts';

const commandstats = ref();
const getDataList = () => {
  homeIndexApi.aiqaWikiAppsCountInfo().then((res: any) => {
    let appNames = res.data.appNames;
    let counts = res.data.counts;
    let rates = res.data.rates;
    let datas = appNames.map((item: any, index: number) => {
      return [item, counts[index]]
    })
    // let data1 = datas.map((item: any, index: number) => {
    //   return [item + 1, counts[index]]
    // })
    // let data2 = datas.map((item: any, index: number) => {
    //   return [item + 2, counts[index]]
    // })
    // datas = [...datas, ...data1, ...data2]
    const commandstatsIntance = echarts.init(commandstats.value, 'macarons');
    commandstatsIntance.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
      },
      dataset: [
        {
          //设置数据分类
          dimensions: ["name", "counts"],
          //设置分类数据
          source: datas
        },
        {
          transform: { //设置排序
            type: "sort",
            config: { dimension: "counts", order: "desc" }
          }
        }
      ],
      xAxis: {
        type: "category", //x轴设置为类目轴
        // 映射
        encode: { x: "name" }
      },
      yAxis: {},
      series: [
        {
          type: "bar",
          // 映射
          encode: { x: "name", y: "counts" },
          datasetIndex: 1, //对数据索引值处数据进行排序
          itemStyle: {
            color: '#1989fa'
          }
        }
      ],
      axisLabel: {
        fontSize: 12,
        formatter: function (value) {
          if (value.length > 2) {
            return value.substr(0, 2) + '...'
          } else {
            return value
          }
        }
      },
      dataZoom: [  // 有滚动条 平移
        {
          // 滚动条以及缩放
          type: "slider",
          // start: 0,
          // end: endZoom,    // 这里end跟数据有关系 数据越多，end越小 end是百分比例
          startValue: 0, // 从头开始。
          endValue: 6,  // 最多六个
          minValueSpan: 6,  // 放大到最少几个
          maxValueSpan: 365,  //  缩小到最多几个
          height: 4,
          fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
          borderColor: "rgba(17, 100, 210, 0.12)",
          top: '96%',
          showDetail: false,
        },

      ]
    });
  })

}
const refreshClick = () => {

}
onMounted(() => {
  getDataList()
});
</script>
<style scoped lang='scss'>
.header_left {
  display: flex;
  align-items: center;

  .header_divider {
    width: 3px;
    border-radius: 2px;
    background-color: #2974f9;
  }

  .header_title {
    font-size: 16px;
    color: #2d2d2d;
    font-family: Source Han Sans CN;
    font-weight: 600;
  }

  .header_refresh {
    width: 18px;
    height: 18px;
    margin-left: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: #ececec;
    }

    .header_refresh_img {
      width: 12px;
      height: 12px;
    }
  }
}
</style>